<template>
     <StartNode :nodeData="nodeData" v-if="nodeData.nodeType === 'start'" :readonly="readonly"></StartNode>
    <userNode :nodeData="nodeData" v-else-if="nodeData.nodeType === 'between'" :readonly="readonly"></userNode>
    <SerialBox :nodeData="nodeData" v-else-if="nodeData.nodeType === 'serial'" :readonly="readonly"></SerialBox>
    <SerialNode :nodeData="nodeData" v-else-if="nodeData.nodeType === 'serial-node'" :readonly="readonly"></SerialNode>
    <ParallelBox :nodeData="nodeData" v-else-if="nodeData.nodeType === 'parallel'" :readonly="readonly"></ParallelBox>
    <ParallelNode :nodeData="nodeData" v-else-if="nodeData.nodeType === 'parallel-node'" :readonly="readonly"></ParallelNode>
    <EndFlow v-else-if="nodeData.nodeType === 'end'"></EndFlow>
    <div v-else>不存在的类别{{ nodeData.nodeId }}</div>
</template>

<script setup>
    import { defineProps, toRefs } from 'vue'
    import StartNode from './startNode.vue'
    import EndFlow from './endNode.vue'
    import userNode from './userNode.vue';
    import SerialBox from './serial/serialBox.vue'
    import SerialNode from './serial/serialNode.vue';

    import ParallelBox from './parallel/parallelBox.vue'
    import ParallelNode from './parallel/parallelNode.vue';
    const props =   defineProps({
        nodeData: {},
        readonly: {
            type: Boolean,
            default: false
        },
    })

    const {readonly} = toRefs(props)
    console.log(readonly.value)
</script>

<style lang="scss" scoped>

</style>